<template>

	<view class="container">
		<scroll-view>
			<view class="adhospital" />
			<view class="mine-form">
				<u--form labelPosition="left" :model="model" :labelWidth="72" :rules="formRules"
					:labelStyle="{paddingLeft: '2px'}">
					<view class="title-wpaer">
						<view class="title-bg">个人信息</view>
						<view class="info_card">
							<u-form-item required label="姓名" prop="userInfo.name" borderBottom>
								<u--input v-model="model.userInfo.name" border="none" disabled color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
							</u-form-item>

							<u-form-item required label="证件类型" prop="userInfo.cardType" borderBottom
								@click="showcardType = true">
								<u--input v-model="model.userInfo.cardType" disabled border="none" color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>

							<u-form-item required label="证件号" prop="userInfo.cardNumber" borderBottom>
								<u--input v-model="model.userInfo.cardNumber" border="none" disabled color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
							</u-form-item>

							<u-form-item required label="联系电话" prop="userInfo.telephone" borderBottom>
								<u--input v-model="model.userInfo.telephone" border="none" disabled color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
							</u-form-item>
							
							<u-form-item required label="其它信息" prop="userInfo.title" borderBottom>
								<u--input v-model="model.userInfo.title" border="none" color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
							</u-form-item>

							<view class="visitor-group-form">
								<u-form-item required label="人员类型" prop="userInfo.visitor" borderBottom>
									<u-radio-group v-model="model.userInfo.visitor" placement="row"
										@change="onChangeVisitor">
										<u-radio :customStyle="{marginRight: '20px', marginBottom: '8px'}"
											v-for="(item, index) in visitors" :key="index" :label="item.name"
											:name="item.name">
										</u-radio>
									</u-radio-group>
								</u-form-item>
							</view>

							<u-form-item required label="现住地址" prop="userInfo.selesrt" borderBottom>
								<u--input v-model="model.userInfo.selesrt" disabled border="none" color="#b2b2b2"
									:customStyle="{backgroundColor: 'white'}"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>

							<u-form-item required label="街道、乡镇地址" :labelWidth="'auto'" prop="userInfo.address"
								borderBottom>
								<u--input v-model="model.userInfo.address" border="none"></u--input>
							</u-form-item>

							<u-form-item required label="社区（小区）和门牌号" :labelWidth="'auto'" prop="userInfo.houseNumber">
								<u--input v-model="model.userInfo.houseNumber" border="none"></u--input>
							</u-form-item>
						</view>
					</view>
				</u--form>
				<view style="margin-top: 40px;" />
				<u--form labelPosition="top" :model="model" :labelWidth="'auto'">
					<view class="title-wpaer">
						<view class="title-bg">流行病史</view>
						<view class="questions_card">
							<u-form-item required :label="`${index+1}.${item.label}`" :prop="`questions[${item.id}]`"
								v-for="(item, index) in questions" :key="item.id">
								<u-radio-group v-model="model.questions[item.id]" placement="row">
									<view class="custom-radio-group">
										<view
											:class="{'custom-btn-active': model.questions[item.id]===true, 'custom-btn': true}">
											<u-button text="是" @click="onClickQuestion(item.id,true)" />
										</view>
										<view
											:class="{'custom-btn-active': model.questions[item.id]===false, 'custom-btn': true}">
											<u-button text="否" @click="onClickQuestion(item.id, false)" />
										</view>
									</view>
								</u-radio-group>
							</u-form-item>
						</view>
					</view>
				</u--form>
				<view class="footer">
					<view class="imsure">
						<u-checkbox-group placement="row" v-model="imsure" labelColor="#fff">
							<u-checkbox labelColor="#fff" @change="onImsureChange"
							name="imsure"
								label="本人承诺上述流行病学史等信息属实，隐瞒事实者将按照《中华人民共和国传染病防治法》等法律法规，承担一切后果和法律责任。">
							</u-checkbox>
						</u-checkbox-group>
					</view>


					<view class="sbmt">
						<u-button @tap="onGo()">提交</u-button>
					</view>
				</view>

			</view>

		</scroll-view>
		<u-action-sheet :show="showcardType" :actions="cardTypes" title="请选择证件类型" @close="showcardType = false"
			@select="onSelectCardType" />
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		cardTypes,
		visitors,
		customStyle,
		questions,
		userInfo,
		questionsModel,
		formRules
	} from './helper.js'

	export default {
		data: () => ({
			model: {
				userInfo: {
					...userInfo
				},
				questions: {
					...questionsModel
				}
			},
			showcardType: false,
			cardTypes,
			visitors,
			questions,
			formRules,
			imsure: []
		}),
		onLoad(option) {
		},
		methods: {
			onSelectCardType(e) {
				this.model.userInfo.cardType = e.name;
			},
			onChangeVisitor(e) {},
			onClickQuestion(id, val) {
				this.model.questions[id] = val;
			},
			onGo() {
				console.log(this.imsure);
				const formVals = Object.values({
					...this.model.userInfo,
					...this.model.questions
				});
				

				if (formVals.some(item => item === "")) {
					this.$refs.uToast.show({
						message: "请检查必填项是否填写完成",
						icon: 'none'
					})
				} else if (this.imsure.length === 0) {
					this.$refs.uToast.show({
						message: "请勾选承诺",
						icon: 'none'
					})
				} else {
					uni.redirectTo({
						url: `/pages/mine/mine?title=${this.model.userInfo.title}`,
						
					});
				}
			},
			onImsureChange(e) {
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: linear-gradient(180deg, #0079fe, #00a9ff);

		.adhospital {
			background: url(../../static/img/questionnaire/pg-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 90%;
			height: 400rpx;
		}

		.footer {
			width: 94%;
			margin: auto;

			.imsure {
				margin-top: 20px;

				view {
					align-items: flex-start !important;
				}

				text {
					line-height: inherit !important;
				}

				/deep/ .u-checkbox-group {

					view {
						flex-shrink: unset !important;

						view {
							view {
								width: 20px;
								display: flex;
								align-items: center;

							}
						}
					}

					/deep/ .u-checkbox__text {
						line-height: inherit !important;
					}

				}
			}

			.sbmt {
				margin-top: 10px;

				button {
					border-radius: 20px;
					color: #00a9ff;
				}

			}
		}



		.mine-form {
			position: relative;
			top: -100rpx;

			/deep/ .u-form-item__body__left__content {
				text:nth-of-type(1) {
					font-size: 13px !important;
					height: 100%;
					line-height: 100%;
				}
			}

			/deep/ .u-form-item__body__right__content__slot {
				* {
					font-size: 14px !important;
				}

			}

			.title-wpaer {
				position: relative;

				.title-bg {
					background: url(../../static/img/questionnaire/title_bg.png) no-repeat;
					background-size: 400rpx 74rpx;
					color: #00a8ff;
					font-size: 34rpx;
					font-weight: 700;
					height: 76rpx;
					left: 50%;
					line-height: 72rpx;
					margin-left: -200rpx;
					position: absolute;
					text-align: center;
					top: -20rpx;
					width: 400rpx;
				}

				.info_card {
					padding-top: 60rpx !important;
					background: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					height: 100%;
					margin: 0 30rpx 20rpx;
					padding: 15rpx 30rpx;

					.visitor-group-form {
						/deep/ .u-radio-group {
							flex-wrap: wrap;
						}

						/deep/ .u-form-item__body__left {
							align-items: flex-start !important;
						}
					}
				}

				.questions_card {
					background: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					height: 100%;
					margin: 0 30rpx 20rpx;
					padding: 15rpx 30rpx;
					padding-top: 30px;

					.custom-radio-group {
						display: flex;
						justify-content: space-between;
						width: 100%;

						.custom-btn {
							width: 48%;

							button {
								background-color: #ededed;
								border: #ededed;
								color: black;
								width: 100%;
							}

						}

						.custom-btn-active {
							button {
								background-color: #0079fe;
								border: #0079fe;
								color: white;
							}
						}
					}

				}
			}
		}
	}
</style>
